// In App.js in a new project

import * as React from 'react';
import {Provider} from 'react-redux'
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator, CardStyleInterpolators, HeaderStyleInterpolators} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import {PersistGate} from 'redux-persist/integration/react'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import {color} from '../utils'
import configureStore from '../reducer'
import VideoScreen from '../page/video'
import FindScreen from '../page/find'
import MineScreen from '../page/mine'
import CloudScreen from '../page/cloud'
import AccountScreen from '../page/account'
import Login from '../page/auth/Login'
import LoginByPhoneNumber from '../page/auth/LoginByPhoneNumber'
import LoginByPhoneNumberNext from "../page/auth/LoginByPhoneNumberNext";


const Stack = createStackNavigator();
const Tab = createBottomTabNavigator()
const MyTheme = {
    dark: false,
    colors: {
        primary: color.black,
        background: color.white,
        card: color.white,
        text: color.black,
        border: color.white,
    },
};
const {store, persistor} = configureStore();

function Root() {
    return <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <NavigationContainer
                theme={MyTheme}
            >
                <Stack.Navigator>
                    <Stack.Screen options={{
                        headerShown: false,
                    }} name={'Login'} component={Login}/>
                    <Stack.Screen options={{
                        title: '手机号登录',
                        headerBackTitleVisible: false
                    }} name={'LoginByPhoneNumber'} component={LoginByPhoneNumber}/>
                    <Stack.Screen options={{
                        title: '手机号登录',
                        headerBackTitleVisible: false
                    }} name={'LoginByPhoneNumberNext'} component={LoginByPhoneNumberNext}/>
                    <Stack.Screen options={{
                        headerShown: false,
                        gestureEnabled: false
                    }} name={'HomeIndex'} component={BottomTab}/>
                </Stack.Navigator>
            </NavigationContainer>
        </PersistGate>
    </Provider>
}


function BottomTab() {
    return (<Tab.Navigator>
            <Tab.Screen
                options={{
                    tabBarLabel: '发现',
                    tabBarIcon: ({color, size}) => (
                        <MaterialCommunityIcons name="file-find" color={color} size={size}/>
                    ),
                }}
                name={'发现'}
                component={FindScreen}/>
            <Tab.Screen
                options={{
                    tabBarLabel: '视频',
                    tabBarIcon: ({color, size}) => (
                        <MaterialCommunityIcons name="video-image" color={color} size={size}/>
                    ),
                }}
                name={'视频'}
                component={VideoScreen}/>
            <Tab.Screen
                options={{
                    tabBarLabel: '我的',
                    tabBarIcon: ({color, size}) => (
                        <MaterialCommunityIcons name="account" color={color} size={size}/>
                    ),
                }}
                name={'我的'}
                component={MineScreen}/>
            <Tab.Screen
                options={{
                    tabBarLabel: '云村',
                    tabBarIcon: ({color, size}) => (
                        <MaterialCommunityIcons name="soundcloud" color={color} size={size}/>
                    ),
                }}
                name={'云村'}
                component={CloudScreen}/>
            <Tab.Screen
                options={{
                    tabBarLabel: '账号',
                    tabBarIcon: ({color, size}) => (
                        <MaterialCommunityIcons name="file-account" color={color} size={size}/>
                    ),
                }}
                name={'账号'}
                component={AccountScreen}/>
        </Tab.Navigator>
    );
}

export {
    BottomTab,
    Root
};
